<!DOCTYPE html>

<head>
	<title>Octave Online</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style type="text/css">
	body {
		width: 75%;
		background-color: #FF5C4A; /* OO Fire Red */
		margin: 0 auto;
		padding: 0;
		font-family: sans-serif;
	}
	@media (max-width: 480px) {
		body {
			width: 100%;
		}
	}
	#main {
		background-color: #fff;
		margin: 0;
		padding: 10px;
		text-align: center;
	}
	input[type=text] {
		font-size: 2em;
		text-align: center;
		border: 2px solid #FF5C4A; /* OO Fire Red */

		display: block;
		width: 90%;
		margin: 1ex auto;
	}
	input[type=submit] {
		font-size: 1.5em;
	}
	</style>
</head>

<body>
	<div id="main">
		<p>
			<img src="/images/logos/icon-black.svg" width="120px" />
		</p>
		<h1>Email Sign-In</h1>
		<form action="./tok" method="get">
			<p>
				<label for="token">An email has been sent to you with your login token.  When you receive your token, enter it here:</label>
			</p>
			<input type="hidden" name="u" value="<%= query ? query.s : '' %>" />
			<p>
				<input type="text" name="t" id="t" value="" autofocus="autofocus" placeholder="Enter Token" />
			</p>
			<p>
				<input type="submit" value="Submit" />
			</p>
		</form>
		<p>
			After you sign in, you can use the "Change Password" option in the menu to set a new password.  If you don't set a password, you can have Octave Online email you a token whenever you sign in.  This prevents you from having to remember a unique password for Octave Online.
		</p>
		<p>
			The email address you entered was: <strong><%= query ? query.s : "(empty)" %></strong>.  If you entered an invalid email address, please click the back button and try again.
		</p>
	</div>
</body>
